import React, { Component } from 'react';
import { NavBar, Space, Badge } from 'antd-mobile';
import { MessageOutline, BellOutline } from 'antd-mobile-icons';
import styles from './Header.module.less';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'React H5 App',
      showBack: false
    };
  }

  componentDidMount() {
    // 根据路由判断是否显示返回按钮
    const { location } = this.props;
    if (location && location.pathname !== '/') {
      this.setState({ showBack: true });
    }
  }

  handleBack = () => {
    const { history } = this.props;
    if (history) {
      history.goBack();
    }
  };

  handleMessage = () => {
    // 消息功能
    console.log('打开消息');
  };

  handleNotification = () => {
    // 通知功能
    console.log('打开通知');
  };

  render() {
    const { title, showBack } = this.state;
    const { customTitle, showActions = true } = this.props;

    return (
      <NavBar 
        className={styles.header}
        onBack={showBack ? this.handleBack : undefined}
        back={showBack}
        backArrow={showBack}
      >
        {customTitle || title}
        
        {showActions && (
          <div className={styles.actions}>
            <Space>
              <div 
                className={styles.actionItem}
                onClick={this.handleMessage}
              >
                <Badge content="3" color="#ff3141">
                  <MessageOutline className={styles.actionIcon} />
                </Badge>
              </div>
              <div 
                className={styles.actionItem}
                onClick={this.handleNotification}
              >
                <Badge content="5" color="#ff8f1f">
                  <BellOutline className={styles.actionIcon} />
                </Badge>
              </div>
            </Space>
          </div>
        )}
      </NavBar>
    );
  }
}

export default Header;
